<template>
	<view class="container">
		<jy-quick-btns></jy-quick-btns>
		<view class="list">
			<view class="item" style="justify-content: center;border: none;margin: 10upx 0;">
				<image class="avatar" :src="userdata.avatar" mode="aspectFit"></image>
			</view>
			<view class="item">
				<text class="left">
					用户昵称
				</text>
				<input type="text" disabled :value="userdata.nickname" @input="changeNickname" />
			</view>
			<view class="item">
				<text class="left">
					手机号
				</text>
				<input type="text" disabled :value="userdata.phone" />
			</view>
			<view class="item">
				<text class="left">
					真实姓名
				</text>
				<input class="eee" type="text" :value="userdata.realname" @input="changeRealname" />
			</view>
			<view class="item">
				<text class="left">
					修改密码
				</text>
				<input class="eee" type="password" @input="changePwd" />
			</view>
			<view class="item">
				<view class="left blue">
					选择单位/分组
				</view>
				<input class="name eee" @click="openLevel" :value="fenleiname" disabled placeholder="请选择单位/分组"/>
				<input  v-model="fenleiid" style="background-color: #eee;display: none;"/>
				<w-picker
					:visible.sync="visible"
					mode="linkage"
					:value="flid"
					:options="treeData"
					:level="2"
					default-type="id"
					:default-props="defaultProps1"
					@confirm="onConfirm($event,'linkage')"
					@cancel="onCancel"
					ref="linkage" 
				></w-picker>
			</view>
			<view class="item">
				<view class="left blue">
					选择机构/班级
				</view>
				<input class="name eee" @click="openLevel1" :value="banjiname" disabled placeholder="请选择机构/班级" />
				<input  v-model="banjiid" style="background-color: #eee;display: none;"/>
				<w-picker
					:visible.sync="visible1"
					mode="linkage"
					:value="bjid"
					:options="treeData1"
					:level="2"
					default-type="id"
					:default-props="defaultProps2"
					@confirm="onConfirm1($event,'linkage')"
					@cancel="onCancel1"
					ref="linkage"
				></w-picker>
			</view>
			<view style="width: 100%;text-align: center;position: absolute;bottom: 20rpx;left:0;">
				<button type="primary" @click="savedata" class="tijiao">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue";
	import { checkUserinfo } from '@/request/checkUserinfo'
	export default {
		components: {
			wPicker
		},
		data(){
			return {
				user:[],
				image:'',
				userinfo:{},
				realname:'',
				nickname:'',
				phone:'',
				userdata:{},
				defaultProps1:{"label":"name","value":"id","children":"children"},
				visible:false,
				treeData:[],
				fenleiname:'',
				fenleiid:'',
				defaultProps2:{"label":"name","value":"id","children":"children"},
				visible1:false,
				treeData1:[],
				banjiname:'',
				banjiid:'',
				flid:[],
				bjid:[],
				password:''
			}
		},
		onLoad() {
			checkUserinfo();
			setTimeout(()=>{
				let userinfo = uni.getStorageSync('userinfo')
				console.log(userinfo)
				this.userinfo = userinfo
				this.userdata = userinfo.userdata
				this.flid = this.userdata.flid.split(',');
				this.flid = this.flid.map(function (item, index, array) {
				          return item - 0;
				    });
				console.log('flid',this.flid);
				this.bjid = this.userdata.class_id.split(',');
				this.bjid = this.bjid.map(function (item, index, array) {
				          return item - 0;
				    });
				console.log('bjid',this.bjid);
				this.banjiname = this.userdata.banji;
				this.fenleiname = this.userdata.danwei;
				this.get_fltree()
				this.get_fltree1()
			},1000)
		},
		onShow() {
			
		},
		methods:{
			get_fltree1(){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/user/fl_select_json1',
					method:'POST',
					data:{	
					},
					success:(res) =>{
						console.log(res.data);
						this.treeData1=res.data.data
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			
			openLevel1() {
				this.visible1=true;
			},
			onCancel1(){
				this.visible1=false;
			},
			onConfirm1(e) {
				// e 确认后选中的数据
				console.log(e)
				this.banjiname=e.result;
				this.banjiid=e.value.toString();
			},
			get_fltree(){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL+'index/user/fl_select_json',
					method:'POST',
					data:{	
					},
					success:(res) =>{
						console.log(res.data);
						this.treeData=res.data.data
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			},
			openLevel() {
				this.visible=true;
			},
			onCancel(){
				this.visible=false;
			},
			onConfirm(e) {
				// e 确认后选中的数据
				console.log(e)
				this.fenleiname=e.result;
				this.fenleiid=e.value.toString();
			},

			changePwd(e){
				this.password=e.detail.value
			},
			changeRealname(e){
				this.realname=e.detail.value
			},
			changePhone(e){
				this.phone=e.detail.value
			},
			savedata(){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL + 'index/user/updateuserdata',
					method: 'POST',
					data: {
						uid: this.userinfo.uid,
						realname:this.realname!=''?this.realname:this.userdata.realname,
						flid:this.fenleiid!=''?this.fenleiid:this.userdata.flid,
						class_id:this.banjiid!=''?this.banjiid:this.userdata.class_id,
						password:this.password,
						token:this.userinfo.token
					},
					success: (res) => {
						if(res.data.code == 0){
							uni.showToast({
								title: "修改成功"
							})
							checkUserinfo();
							console.log(res.data)
						}else{
							console.log(res.data)
						}
					},
				});
			},
			// 添加封面
			cover_img(){
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['copressed'], //可以指定是原图还是压缩图，默认二者都有
				    success:(res)=>{
						const BASE_URL=uni.BASE_URL;
						const HOST_URL = uni.HOST_URL;
						const tempFilePaths = res.tempFilePaths;
						var imgFiles = res.tempFilePaths[0];
						var that=this
						uni.uploadFile({
							url:BASE_URL+'index/upload/uploadAvatar',		//post请求的地址
							filePath:imgFiles,
							name:'file',
							success: (uploadFileRes) => {
								
								//这里要注意，uploadFileRes.data是个String类型，要转对象的话需要JSON.parse一下
								var obj = JSON.parse(uploadFileRes.data);
								
								var image = HOST_URL + obj.data;
								console.log(image)
								this.updatauser(image);
								
							}
						})
				    }
				});
			},
			
			//修改用户头像
			updatauser(image){
				const BASE_URL = uni.BASE_URL
				uni.request({
					url: BASE_URL + 'index/user/update',
					method: 'POST',
					data: {
						uid: this.userinfo.uid,
						image:image
					},
					success: (res) => {
						if(res.data.code == 0){
							this.image = image
							uni.showToast({
								icon: 'none',
								title: "修改成功"
							})
							console.log(res.data)
						}else{
							console.log(res.data)
						}
					},
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.container{
		height: 100vh;
		background-color: #f3f3f3;
		.tijiao{
			margin: 0 auto;
			width: 50%;
			padding: 0 10rpx;
		}
		.top{
			height: 250upx;
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			padding-right: 25upx;
			.left{
				box-sizing: border-box;
				padding-left: 30upx;
				font-size: 30upx;
				font-weight: 777;
				color: #333333;
				width: 70%;
				height: 100%;
				line-height: 250upx;
			}
			.middle{
				width: 25%;
				height: 100%;
				image{
					width: 130upx;
					height: 130upx;
					border-radius: 50%;
					margin-top: 60upx;
				}
			}
			.right{
				width: 5%;
				height: 100%;
				image{
					width: 20upx;
					height: 30upx;
					margin-top: 110upx;
				}
			}
			
		}
		.list{
			height: 400upx;
			.item{
				box-sizing: border-box;
				height: 100upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				padding:0 8upx;
				border-bottom: 1rpx solid #eee;
				.avatar{
					width: 100upx;
					height: 100upx;
					border-radius: 50upx;
				}
				.left{
					font-size: 28upx;
				}
				.blue{
					color: #2196f3;
				}
				input{
					background-color: #fff;
					padding: 5rpx 8rpx;
					border-radius: 8rpx;
					width: 80%;
					font-size: 28upx;
				}
				.eee{
					background-color: #eee;
				}
			}
			
		}
		
	}
</style>
